<template>
	<div class="shopcar-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="shopcar-content">
			<div class="content-item" v-for="(item,index) in carArr" :key="index">
				<div class="item-iconImg">
					<i v-if="(!isSelected)&&(!isSelectedCur)" 
						class="iconfont icon-yuanquan" 
						@click="selectedCur">
					</i>
					<i v-else class="iconfont icon-quanxuan select" @click="selectedCur"></i>
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="item-title">
					<p class="title-one">{{item.title}}</p>
					<p class="title-two"><i class="iconfont icon-renminbi"></i><span>{{item.price}}</span></p>
				</div>
				<div class="item-counter" @click="orderInfo(item.id,index)">
					<Counter :max="Counter.max" :min="Counter.min"
					 @counter="getCountInfo" />
				</div>
			</div>
		</div>
		<div class="shopcar-footer">
			<div class="left-footer">
				<i v-if="!isSelected" class="iconfont icon-yuanquan"  @click="allSelected"></i>
				<i v-else class="iconfont icon-quanxuan select" @click="allSelected"></i>
				<span @click="allSelected">全选</span>
			</div>
			<div class="center-footer">
				<p class="center-one">
					合计：<i class="iconfont  icon-renminbi"></i> <span>{{sum}}</span>
				</p>
				<p class="center-two">
					已优惠 <i class="iconfont  icon-renminbi"></i> <span>0</span>
				</p>
			</div>
			<div class="right-footer">
				<router-link to="/shopping/shopcar/checkorder">结算({{carArr.length}})</router-link>
			</div>
		</div>
		{{ getCounter }}
	</div>
</template>
<script>
	import "../../assets/iconfont/iconfont.css"
	import ShopHeader from "../../components/shopheader"
	import Counter from "./components/counter"
	export default{
		name:'shopcar',
		data(){
			return{
				sum:0,
				curCount:1,
				totalPrice:0,
				order:{},
				Counter:{
					max:20,
					min:1
				},
				isSelectedCur:true,
				isSelected:true,
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-lajixiang"
						}
					],
					placeholder:"购物车",
					aimUrl:"/layout/shopping",
					rightUrl:''
				},
				carArr:[
					{ 
						id:"yagesofa",
						title:'雅阁沙发',
						price:'1899',
						imgUrl:require("../../assets/images/shopping/img_yage@2x.png")
					},
					{ 
						id:'oushansofa',
						title:'欧珊沙发',
						price:'1688',
						imgUrl:require("../../assets/images/shopping/img_oushan@2x.png")
					}
				]
			}
		},
		components:{
			ShopHeader,
			Counter
		},
		methods:{
			allSelected(){
				this.isSelected=!this.isSelected;
				this.isSelectedCur=!this.isSelectedCur;
			},
			selectedCur(){
				this.isSelectedCur=!this.isSelectedCur;
			},
			getCountInfo(data){
				this.curCount=data;
				// console.log(data)
			},
			orderInfo(curId,index){
				this.order[curId]=this.curCount
				var curPrice=this.sum
				this.totalPrice=parseInt(this.carArr[index].price)*this.curCount
				curPrice=curPrice+parseInt(this.carArr[index].price)
				this.$store.dispatch("updateOrder",this.order)
				this.$store.dispatch("updatePrice",curPrice)
				// console.log(this.$store.getters.getOrder)
				// console.log(this.$store.getters.getTotalPrice)
				this.sum=this.$store.getters.getTotalPrice
				var commont=this.order
				commont.totalPrice=curPrice
				console.log(commont)
				// this.$cookie.set("order",JSON.stringify(commont),7)
			}
		},
		computed:{
			getCounter(){
				var curSum=0;
				for(var i =0 ;i <this.carArr.length;i++){
					curSum+=parseInt(this.carArr[i].price)
				}
				this.sum=curSum
			}
		}
	}
</script>
<style scoped lang="less">
	.shopcar-container{
		width: 100%;
		background-color: #efefef;
		overflow: hidden;
		.shopcar-content{
			width: 95%;
			margin: 0 auto;
			// height: 700/50rem;
			overflow: hidden;
			margin-top: 92 / 2 / 50rem;
			.content-item{
				width: 100%;
				height: 194/2/50rem;
				border-radius: 5/50rem;
				background-color: #fff;
				margin-top: 20/2/50rem;
				margin-bottom: 20/2/50rem;
				padding: 20 / 2 / 50rem;
				box-sizing: border-box;
				overflow: hidden;
				.item-title,.item-iconImg,.item-counter{
					float: left;
				}
				.item-iconImg{
					width: 36%;
					margin-top: 6 / 2 / 50rem;
					img{
						width: 185 / 2 / 50rem;
						height: 140 / 2 / 50rem;
						vertical-align: middle;
					}
				}
				.item-title{
					width: 38%;
					height: 100%;
					overflow: hidden;
					.title-one{
						margin-top: 43 / 2 / 50rem;
						color: rgba(0,0,0,.8);
						font-size: 15 / 50rem;
						font-weight: 700;
						margin-bottom: 20 / 2 / 50rem;
					}
					.title-two i,.title-two span{
						color: rgba(0,0,0,.7);
						font-size: 13 / 50rem;
						font-weight: 700;
					}
				}
				.item-counter{
					margin-top: 70 / 2 / 50rem;
				}
			}
		}
		.shopcar-footer{
			width: 100%;
			height: 122/2/50rem;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: hidden;
			.left-footer,.center-footer,.right-footer{
				float: left;
				height: 100%;
				font-size: 15 / 50rem;
			}
			.left-footer{
				width: 33%;
				text-indent: 45 / 2 / 50rem;
				line-height:122 / 2 / 50rem;
				color: #f55;
				i{
					color: rgba(0,0,0,.8);
				}
				.select{
					color: #f55;
				}
			}
			.center-footer{
				width: 40%;
				text-align: center;
				margin-top: 4%;
				.center-one{
					color: rgba(0,0,0,.8);
				}
				.center-two{
					color: #f55;
				}
			}
			.right-footer{
				width: 27%;
				background-color: #f55;
				color: #fff;
				text-align: center;
				line-height: 122 / 2 / 50rem;
			}
		}
		.select{
			color: #f55;
		}
	}
</style>